<template>
	<view>

		<uni-title type="h2" :title="roomName" align="center"></uni-title>
		
		<uni-title type="h3" :title="'我是' + nickName" align="center"></uni-title>
		
		<!-- 选择身份按钮 -->
		<view v-show="userType == 0" style="display: flex;">
			<button type="primary" @click="initQd" :disabled="questionNumber != ''" class="zhuchiren-button">开始</button>
			<button type="warn" @click="endQd" class="zhuchiren-button">重置</button>
		</view>

		<!-- 选择身份按钮 -->
		<view v-show="userType == 1">
			<button type="warn" class="xuanshou-button" v-show="!successFlag" @click="startQd">我抢</button>
			<button type="primary" class="xuanshou-chenggong-button" v-show="successFlag">我抢到了</button>
		</view>
		
		<view v-show="userType == 1">
			<button class="mini-btn" type="primary" size="mini" @click="again" v-show="successFlag">再来一局</button>
		</view>
		
		
		<!-- 选手列表 -->
		<view v-show="userType == 0">
			<uni-list v-if="userList.length > 0">
				<uni-list-item :title="(item.type==1?'【选手】：':'【主持人】：') + item.nickName" 
						v-for="(item,index) in userList" :key="index"
						clickable @click="deleteUser($event, item.id)"></uni-list-item>
			</uni-list>
			
			<span v-if="userList.length == 0">
				没有参赛选手！
			</span>
			
			<view style="display: flex;">
				<button @click="loadUserList" type="primary" style="margin-top: 20px;">刷新选手</button>
				<button @click="clearUserList" type="warn" style="margin-top: 20px;">清空选手</button>
			</view>
			
		</view>


	</view>
</template>

<script>
	import {
		createRoom,
		listRoom
	} from '@/api/qiangda/room.js'
	import {
		initQd,endQd,startQd
	} from '@/api/qiangda/qd.js'
	import {
		listUser,clearUser,removeUser
	} from '@/api/qiangda/user.js'

	export default {

		data() {
			return {
				userType: "",
				userId:'',
				roomNumber: "",
				roomName: '',
				nickName:'',
				
				qdOverFlag:'', // 抢答结束的标志
				
				userList:[],
				
				questionNumber:'', // 问题编号
				start: true,
				successFlag:false // 抢成功的标志
			}
		},
		created() {

			var queryParams = this.$route.query;
			this.userType = queryParams.userType;
			this.userId = queryParams.userId;
			this.nickName = queryParams.nickName;
			this.roomNumber = queryParams.roomNumber;
			this.roomName = queryParams.roomName;
			console.log(this.userType + "-" + this.roomNumber + '-' + this.userId)
			
			if(this.userType == 0) {
				// 加载这个房间里面的用户
				this.loadUserList();
			}
		},
		methods: {
			// 用户选择身份
			initQd() {
				initQd(this.roomNumber).then(res=>{
					// 设置编号
					this.questionNumber = res.questionNumber
					uni.showToast({title: "问题生成："+res.questionNumber, icon: 'none',duration: 1000}) 
				})
			},
			endQd() {
				endQd(this.roomNumber).then(res=>{
					console.log(res, '重置')
					this.questionNumber = ''
				})
			},
			startQd() {
				// 抢答
				let qdInfo = {
					userId: this.userId,
					nickName: this.nickName,
					roomNumber: this.roomNumber
				}
				startQd(qdInfo).then(res=>{
					console.log(res);
					if(res.qdResult != 'ok') {
						uni.showToast({title: res.qdResult,icon: 'none',duration: 1000})  
						return
					}else {
						this.successFlag = true;
					}
				})
			},
			
			// 再来一局
			again(){
				this.successFlag = false;
			},
					
			// 用户列表
			loadUserList(){
				listUser(this.roomNumber).then(res=>{
					this.userList = res.userList
				})
			},
			
			deleteUser(event, userId){
				
				// 删除指定用户
				removeUser(this.roomNumber, userId).then(res=>{
					// 重新加载用户
					this.loadUserList();
				})
			},
			
			// 清空当前列表
			clearUserList() {
				clearUser(this.roomNumber).then(res=>{
					// 加载列表
					this.loadUserList(this.roomNumber)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.my-button {
		// height: 33%;
		width: 50%;
		margin-top: 50px;
		margin-bottom: 50px;
	}

	.zhuchiren-button {
		// height: 33%;
		font-size: 30px;
		width: 100px;
		height: 100px;
		line-height: 100px;
		border-radius: 50%;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	
	.xuanshou-button {
		// height: 33%;
		font-size: 60px;
		width: 200px;
		height: 200px;
		line-height: 200px;
		border-radius: 50%;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	
	.xuanshou-chenggong-button {
		// height: 33%;
		font-size: 30px;
		width: 200px;
		height: 200px;
		line-height: 200px;
		border-radius: 50%;
		margin-top: 50px;
		margin-bottom: 50px;
		background: green;
	}
</style>